import React, {Component} from 'react';
import {
    View,
    StyleSheet,
    Text,
    ScrollView
} from 'react-native';
import Constant from "../../js/Contant";
import {observable, action, computed, observe} from 'mobx'
import {observer} from 'mobx-react/native'
import RequestUtil from '../../js/util/NetUtil'
import LoadingView from "../../js/component/LoadingView";

const RecordCell  = observer(({record})=>{
    let recordType = record.recordType=='income' ? '+' : '-'
    return <View style={[{paddingVertical:10,paddingHorizontal:15,backgroundColor:'#fff',flexDirection:'row',justifyContent:'space-between'},styles.borderBottom]}>
        <View>
            <Text style={{fontSize:16,color:Constant.TEXT_COLOR_2}}>{record.relatedName}</Text>
            <Text style={{fontSize:12,color:Constant.TEXT_COLOR_6,paddingTop:5}}>{record.time}</Text>
        </View>
        <View>
            <Text style={{fontSize:16,color:Constant.TEXT_COLOR_2}}>{recordType}{record.deltaMount+''}张</Text>
            <Text style={{fontSize:12,color:Constant.TEXT_COLOR_6,paddingTop:5}}>剩余{record.currentMount+''}张</Text>
        </View>
    </View>
})

@observer
export default class MyTicketRecord extends Component{

    @observable recordList = [] ;
    @observable loading = true ;

    static navigationOptions = {
        title: '账单',
        headerTitleStyle: {alignSelf: 'center'},
        headerStyle: {
            backgroundColor: '#fff'
        }
    };

    componentDidMount() {
        RequestUtil.requestData('account/ticket',{}).then(data=>{
            this.loading = false ;
            if(data){
                this.recordList = data ;
            }
        })
    }

    render(){
        return <View style={{flex:1,backgroundColor:Constant.GRAYBGCOLOR}}>
            <LoadingView
                visible={this.loading}
                color="white"
                indicatorSize="small"
                messageFontSize={12}
                message='正在加载'
            />
            <ScrollView>
                {this.recordList.map(record=>{
                    return <RecordCell record={record}/>
                })}
            </ScrollView>
        </View>
    }
}

const styles =  {
    borderBottom: {
        borderBottomColor: Constant.SEPLINECOLOR,
        borderBottomWidth: StyleSheet.hairlineWidth
    },
}


